
<template>
    <el-form :model="form" ref="form" :rules="formRules">
        <el-row>
            <el-col :span="8">
                <el-form-item prop="province" :rules="formRules.change" :show-message="false" style="margin: 0">
                    <el-select v-model="form.province" @change="provinceChange" placeholder="请选择省">
                        <el-option v-for="item in provinceArray" :key="item.name" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item prop="city" :rules="formRules.change" :show-message="false" style="margin: 0">
                    <el-select v-model="form.city" @change="cityChange" placeholder="请选择市">
                        <el-option v-for="item in cityArray" :key="item.name" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item prop="area" :rules="formRules.change" :show-message="false" style="margin: 0">
                    <el-select v-model="form.area" @change="countyChange" placeholder="请选择区">
                        <el-option v-for="item in countyArray" :key="item.name" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
import { formRules } from '@/common/util/validator';
// import api_work from "../api/api_work";
import { Type } from '@/http/interface';
import { api } from '@/http/api';
@Component({
    components: {},
})
export default class AddressSelect extends Vue {
    public provinceArray: Type.GetProvincialUrbanAreasListReponse[] = []; //省
    public cityArray: Type.GetProvincialUrbanAreasListReponse[] = []; //市
    public countyArray: Type.GetProvincialUrbanAreasListReponse[] = []; //区
    public formRules = formRules;
    public $refs: {
        form: HTMLFormElement;
    };
    /*模板渲染  */
    public form = {
        province: '', //省
        city: '', //市
        area: '', //区
    };

    public created() {
        this.init();
    }
    /* 初始化省 */
    public async init() {
        let result = await this.getName('');
        this.provinceArray = result;
    }
    /* 过滤 */
    public filterPcode(array, name) {
        const data = array.filter((item) => {
            return item.name == name;
        })[0].id;
        return data;
    }
    /* 获取省市区数组 */
    public async getName(pcode) {
        return await api.ProvincialUrbanAreas_GetProvincialUrbanAreasList({ pcode: pcode });
    }

    /* 监听省 点击事件 */
    public provinceChange(val) {
        this.form.province = val;
        /* 清空市、区 */
        this.cityArray = [];
        this.form.city = '';
        this.form.area = '';
        this.countyArray = [];
        let pcode = this.filterPcode(this.provinceArray, val);
        console.log('pcode', pcode);
        /* 获取市列表 */
        this.getName(pcode).then((res) => {
            this.cityArray = res;
        });
    }
    /* 监听市 点击事件 */
    public cityChange(val) {
        this.form.city = val;
        this.form.area = '';
        this.countyArray = [];
        let pcode = this.filterPcode(this.cityArray, val);
        /* 获取区列表 */
        this.getName(pcode).then((res) => {
            this.countyArray = res;
        });
    }
    /* 监听区 点击事件 */
    public countyChange(val) {
        this.form.area = val;
        this.$refs.form.validate((valid) => {
            if (valid) {
                this.$emit('getAddress', this.form);
            }
        });
    }

    /* 触发地址组件的校验 */
    public validateForm() {
        let flag = false;
        this.$refs.form.validate((valid) => {
            flag = valid;
        });
        return flag;
    }
}
</script>
